// 测试vue3中的hook -- 可复用的功能函数
// 类似于mixins

import {ref,onMounted,onUnmounted, } from 'vue'
export default function mousePagePosition() :any {
    const x = ref(-1)
    const y = ref(-1)

    // 为了移除事件能够生效所以将处理函数单独拿出去
    function testHandler(e: MouseEvent){
        // console.log(e);
        x.value = e.pageX
        y.value = e.pageY
        
    }
    
    // dom生成之后监听整个页面的鼠标点解事件
    onMounted(() =>{
        document.addEventListener('click',testHandler)
    })
    onUnmounted(()=>{
        document.removeEventListener('click',testHandler)
    })
    
    return {x,y}
}